<div class="config-detail">
    <div class="loader" ng-show="!persistents">
        <div class="loader-inner ball-clip-rotate-multiple">
            <div></div>
            <div></div>
        </div>
    </div>
    <div ng-show="persistents">
        <div class="panel panel-default" style="margin-bottom: 50px">
            <div class="panel-heading">
            <span class="panel-title">
                <span class="icon25 configicon"></span>&nbsp;&nbsp;{{name}}
            </span>
                <a class="btn btn-gray pull-right" style=" padding: 5px 10px; margin-left: 15px; height:34px; width:36px" ng-click="delete()"><i class="fa fa-trash-o fa-lg"></i></a>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="media media-sm">
                            <div class="media-left">
                                <img class="media-object" src="views/build_detail/img/images_104.png">
                            </div>
                            <div class="media-body">

                                <h4 class="media-heading">更新时间</h4>
                                <small uib-tooltip="{{persistents.metadata.creationTimestamp | timescon}}">
                                    {{persistents.metadata.creationTimestamp | dateRelative}}
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="media media-sm">
                            <!--<div class="media-left">-->
                            <!--<img class="media-object" src="views/build_detail/img/images_104.png">-->
                            <!--</div>-->
                            <div class="media-body">

                                <h4 class="media-heading">持久化卷大小</h4>
                                <small style="color: #5a6378;">{{persistents.spec.resources.requests.storage}}</small>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="media media-sm">
                            <!--<div class="media-left">-->
                            <!--<img class="media-object" src="views/build_detail/img/images_104.png">-->
                            <!--</div>-->
                            <div class="media-body">

                                <h4 class="media-heading">持久化卷状态</h4>
                                <small style="color: #5a6378;">{{persistents.status.phase | bandFilter}}</small>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="media media-sm">
                            <!--<div class="media-left">-->
                            <!--<img class="media-object" src="views/build_detail/img/images_104.png">-->
                            <!--</div>-->
                            <div class="media-body">

                                <h4 class="media-heading">挂载服务数量</h4>
                                <small style="color: #5a6378;">{{persistents.arr.length}}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <uib-tabset class="tab-default" active="active">
            <uib-tab index="1">
                <uib-tab-heading>
                    <i class="icon20 icon20-paper"></i> 挂载信息
                </uib-tab-heading>
                <div class="panel-default">
                    <div class="panel-heading">
                        <p>挂载的服务列表</p>
                    </div>
                    <div class="panel-body" style="padding:0">
                        <ul style="padding: 0;margin: 0;">
                            <li ng-repeat="item in persistents.arr" class="listitems" style="list-style: none;height: 60px;line-height: 60px;">
                                <a class="listitem" ui-sref="console.service_detail({name:item})" style="color:#f6a540">{{item}}</a></li>
                            <div style="text-align: center;background:#f7f8fb;position:relative;border:1px solid #ccc;padding-top:15px;padding-bottom:15px;"
                                 ng-if="persistents.arr.length===0"><p class="blank_block"><span class="blank_tit">无挂载服务</span></p></div>
                        </ul>
                    </div>
                </div>
            </uib-tab>
        </uib-tabset>
    </div>


</div>
<style>
    #listitem{
        border-bottom: 1px solid #c9c9c9;
    }
    .listitems {
        padding-left: 20px;
        border-bottom: 1px solid #E6E9F2;
    }
    .listitems:hover {
        background-color: #f7f8fb;
    }
    .listitem:hover{
        color: #5b73eb;
    }
</style>